import { DeleteOutlined, EditOutlined, PlusCircleOutlined, PlusOutlined } from '@ant-design/icons';
import {
  Button,
  Card,
  Col,
  DatePicker,
  DatePickerProps,
  Divider,
  Input,
  InputNumber,
  Row,
  Table,
} from 'antd';
import TextArea from 'antd/es/input/TextArea';
import { ColumnsType } from 'antd/es/table';
import React from 'react';
import styles from './index.less';
interface DataType {
  key: React.Key;
  name: string;
  age: string;
  address: string;
  goodsName: string;
  else: string;
}

const columns1: ColumnsType<DataType> = [
  {
    title: '操作',
    dataIndex: 'name',
    align: 'center',
    render: () => (
      <div className={styles.iconBox}>
        <PlusCircleOutlined className={styles.iconColor} />
        <DeleteOutlined className={styles.iconColor} />
      </div>
    ),
  },
  {
    title: '产品名称',
    dataIndex: 'goodsName',
    align: 'center',
  },
  {
    title: '规格',
    dataIndex: 'age',
    align: 'center',
  },
  {
    title: '单位',
    dataIndex: 'name',
    align: 'center',
  },
  {
    title: '类别',
    dataIndex: 'name',
    align: 'center',
  },
  {
    title: '仓库',
    dataIndex: 'name',
    align: 'center',
  },
  {
    title: '数量',
    dataIndex: 'name',
    align: 'center',
  },
  {
    title: '采购单价',
    dataIndex: 'name',
    align: 'center',
  },
  {
    title: '采购金额',
    dataIndex: 'name',
    align: 'center',
  },
];

const data: DataType[] = [
  {
    key: '1',
    name: 'John Brown',
    age: '12mm',
    address: 'New York No. 1 Lake Park',
    goodsName: '鸿盛双面胶',
    else: '家用电器',
  },
  {
    key: '2',
    name: 'Jim Green',
    age: '12400',
    address: 'London No. 1 Lake Park',
    goodsName: '鸿盛文具胶',
    else: '日常用品',
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 'YT',
    address: 'Sydney No. 1 Lake Park',
    goodsName: '晨光粘性标签',
    else: '办公设备',
  },
  {
    key: '4',
    name: 'Disabled User',
    age: '220g',
    address: 'Sydney No. 1 Lake Park',
    goodsName: '已旦木',
    else: '食品',
  },
  {
    key: '4',
    name: 'Disabled User',
    age: '2kg',
    address: 'Sydney No. 1 Lake Park',
    goodsName: '弹簧片',
    else: '服饰鞋包',
  },
];
const onChange: DatePickerProps['onChange'] = (date, dateString) => {
  console.log(date, dateString);
};
export default function Neko() {
  return (
    <div className={styles.wrap}>
      <Row gutter={[16, 16]}>
        <Col span={24}>
          <Card>
            <div className={styles.rightBox}>
              <div className={styles.rightBox_title}>
                <div className={styles.rightBox_title_ru}>采购入库</div>

                <Button type="primary">保存草稿</Button>
              </div>

              <Divider />

              <Row gutter={[16, 16]} style={{ marginBottom: 20 }}>
                <Col>
                  入库日期： <DatePicker onChange={onChange} />
                </Col>
                <Col>
                  订单采购编号： <Input style={{ width: 159 }} placeholder="请输入订单采购编号" />
                </Col>
                <Col>
                  入库人员： <Input placeholder="请输入入库人员" style={{ width: 159 }} />
                </Col>
              </Row>

              <Table columns={columns1} dataSource={data} />

              <TextArea showCount maxLength={100} placeholder="请输入备注信息" />
              <Row gutter={[16, 16]} style={{ margin: '20px 0' }}>
                <Col>
                  其他费用 <InputNumber min={1} max={10} defaultValue={3} />
                </Col>
              </Row>
              <Row gutter={[16, 16]} style={{ marginBottom: 20 }}>
                <Col>
                  优惠率（%） <InputNumber min={1} max={10} defaultValue={3} />
                </Col>
                <Col>
                  优惠金额（元） <InputNumber min={1} max={10} defaultValue={3} />
                </Col>
                <Col>
                  优惠后应付款（元） <InputNumber min={1} max={10} defaultValue={3} />
                </Col>
              </Row>
            </div>
          </Card>
        </Col>
      </Row>
    </div>
  );
}
